<template>
  <van-card v-for="user in userList"
  :desc=user.profile
  :title=user.username
  :thumb=user.avatarUrl
  :tag="getGenderText(user.gender)"
>
  <template #tags>
    <van-tag plain type="primary" v-for="tag in user.tags" style="margin-right: 8px;margin-top: 8px;">
      {{tag}}
    </van-tag>
  </template>
  <template #footer>
    <van-button v-if="user.gender ==1" size="mini">联系他</van-button>
    <van-button v-else size="mini">联系她</van-button>
  </template>
</van-card>
<van-empty v-if="!userList ||userList.length<1 " description="搜索结果为空"></van-empty>

</template>





<script setup lang="ts">

import { useRoute } from 'vue-router';
import {onMounted, ref} from 'vue';
import myAxios from '../../plugins/myAxios';
import qs from 'qs'



const route = useRoute();
const {tags} = route.query



const userList = ref();


onMounted(()=>{
  getUserList()
})

const getUserList = async()=>{
  const userListData = await myAxios.get('/user/search/tags',{
    params:{
      tagNameList:tags
    },
    paramsSerializer: function(params) {
    return qs.stringify(params, {indices:false})
  }
})
.then((response)=>{
    return response
  }).catch((error)=>{
    console.error(error);
  })
  if(userListData){
    userListData.data.data.forEach((user: { tags: string; })=>{
      if(user.tags){
        user.tags = JSON.parse(user.tags)
      }
    })
    userList.value = userListData.data.data
  }
}
const getGenderText = (gender:any)=>{
  if(gender == 1) return '男' 
  else return '女'
}


</script>



<style scoped>

</style>